import React, { Suspense } from 'react';
import { Button, Modal, Form, Input, List, Spin, Drawer, Icon, Pagination } from 'antd';
import styles from './index.less';
import PageLoading from '@/components/PageLoading';
import searchImg from '@/assets/knowledge/search.png';
import xjImg from '@/assets/dialog/xj.png'
import onImg from '@/assets/knowledge/on.png';
import offImg from '@/assets/knowledge/off.png';

const { Search } = Input;
const SlotModal = Form.create({ name: 'form_in_modal' })(
  class extends React.Component {

    onClose = () => {
      this.setState({
        visible: false,
      });
    };
    setQuery=(e)=>{
      this.setState({
        key:e.target.value
      })
    };
    render() {
      const { visible, onCancel, searchSlot, listData, addSlot, loading, total, pageChange, alreadyExisted ,limitChange} = this.props;
      // return (
      //   <Modal
      //     footer={null}
      //     title="添加词槽"
      //     visible={visible}
      //     onCancel={onCancel}
      //     width={460}
      //   >
      //     <div>
      //       <Search
      //         placeholder="请输入已有词槽"
      //         onSearch={value => searchSlot(value)}
      //         style={{ width: 350 }}
      //       />
      //       <a href="/basic/wordTroughManage" style={{marginLeft:26}}>新建</a>
      //     </div>
      //     <div>
      //       <List
      //         size="small"
      //         footer={null}
      //         loading={loading}
      //         itemLayout="vertical"
      //         pagination={{
      //           onChange: page => {
      //             pageChange(page)
      //           },
      //           total:parseInt(total),
      //         }}
      //         dataSource={listData}
      //         style={{marginTop:10}}
      //         renderItem={items => (
      //           <List.Item style={{border:"none", padding: '6px 0'}}>
      //             {
      //               //e alreadyExistd.length>0?
      //               // alreadyExisted.map((i)=>{
      //               //    return(
      //               //      i.key === items.key ?
      //               //        <div><Button htmlType='button' type="primary" size='small' className={styles.selectBtn} onClick={() =>addSlot(items)}>已选择</Button>{items.name}</div>
      //               //        :
      //               //        <div><Button htmlType='button' type="primary" size='small' className={styles.selectBtn} onClick={() =>addSlot(items)}>选择</Button>{items.name}</div>
      //               //    )
      //               // })
      //               // :
      //                <div><Button htmlType='button' type="primary" size='small' className={styles.selectBtn} onClick={() =>addSlot(items)}>选择</Button>{items.name}</div>
      //             }
      //           </List.Item>
      //         )}
      //       />
      //     </div>
      //   </Modal>
      // );

      return (
        <div className={styles.rightDrawer}>
          <Drawer
            className="zdyset"
            title={
              <span  onClick={onCancel} style={{cursor:'pointer'}}>
                 <Icon type="arrow-left" style={{ marginRight: 20 }} />
                  添加词槽
                </span>
               }
            closable={false}
            width='calc(100vw - 245px)'
            placement="right"
            onClose={onCancel}
            visible={visible}
            destroyOnClose
          >
            <Suspense  fallback={<PageLoading />}>
              <div  className={styles.der}>
                <div className="zdyinputa" style={{position:'relative'}}>
                  <Search
                    placeholder="请输入已有词槽"
                    onSearch={value => searchSlot(value)}
                    style={{ width: 350 }}
                  />

                  <a href="/basic/wordTroughManage" target='_blank'  style={{ marginLeft: 26,position:'absolute',right:20}}>
                    <img style={{ cursor: 'pointer' }}  src={xjImg} />
                  </a>
                </div>

                <div>
                  <List
                    size="small"
                    footer={null}
                    loading={loading}
                    itemLayout="vertical"
                    // pagination={{
                    //   onChange: page => {
                    //     pageChange(page);
                    //   },
                    //   total: parseInt(total),
                    // }}
                    dataSource={listData}
                    style={{ marginTop: 10 }}
                    renderItem={items => (
                      <List.Item style={{ border: 'none',display:'inline-block', padding: '6px 0' }}>{

                        alreadyExisted.findIndex(d=>d.key===items.key)>-1 ?
                         <div style={{display:'inline-block',margin:'0 20px'}}><img src={onImg} style={{ cursor: 'pointer', width: 30, marginTop: 5 }} alt="" onClick={() =>addSlot(items)}/> {items.name}</div>
                        :
                        <div style={{display:'inline-block',margin:'0 20px'}}><img src={offImg} style={{ cursor: 'pointer', width: 30, marginTop: 5 }} alt="" onClick={() =>addSlot(items)}/> {items.name}</div>

                        }
                      </List.Item>
                    )}
                  />
                  <Pagination
                    style={{ textAlign: 'center', marginTop: 20 }}
                    total={total}
                    showSizeChanger={true} // 是否显示可以设置几条一页的选项
                    onChange={page => pageChange(page)}
                    showTotal={() => `共 ${total} 条`}
                    onShowSizeChange={(current, size) =>limitChange(size)}
                  />
                </div>
              </div>

            </Suspense>

          </Drawer>
        </div>
      );
    }
  },
);

export default SlotModal;
